<template>
  <div class="positionMain" ref="scrollTopList">
    <div id="container">
      <div class="sidebar" v-if="areaList.cities != ''">
        <div id="options" class="greybg">
          <dl>
            <dt>区域位置</dt>
            <dd>
              <div
                :style="(formItem.area_id == '' || formItem.area_id == areaList.cities[0].code) && 'background:#91cebe;color:white'"
                @click="areaSelect(areaList.cities[0].code)"
              >{{areaList.cities[0].name}}</div>
              <div
                v-for="(city,index) in areaList.cities[0].areas"
                @click="areaSelect(city.code)"
                :key="index"
                :style="formItem.area_id == city.code && 'background:#91cebe;color:white'"
              >{{city.name}}</div>
            </dd>
          </dl>
          <!-- <dl>
            <dt>职位类别</dt>
            <dd>
              <div>不限</div>
              <div>应届毕业生</div>
              <div>1年以下</div>
              <div>1-3年</div>
              <div>3-5年</div>
              <div>5-10年</div>
              <div>10年以上</div>
            </dd>
          </dl>-->
        </div>
      </div>

      <div class="content">
        <div id="search_box">
          <input
            type="text"
            id="search_input2"
            v-model="formItem.keyword"
            name="kd"
            placeholder="搜索企业/职位"
          />
          <input type="submit" id="search_button" @click="search" value="搜索" />
        </div><br>
        <PositionList :jobList="jobList"></PositionList>
        <Empty v-if="jobList.length == 0" content="暂无符合条件的职位~"></Empty>
        <el-pagination
          v-if="jobList.length"
          background
          layout="prev, pager, next"
          :total="pageTotal"
          :page-size="pageSize"
          @current-change="changePage"
        ></el-pagination><br>
      </div>
    </div>
  </div>
</template>

<script>
import { JobList, Area } from "~/api/worker/job.js";
import { getSalaryUnit, getJobTag } from "~/common/js/util.js";
import { Message } from "element-ui";
import Empty from "~/components/empty/empty"
import PositionList from "~/components/positionList/positionList"

export default {
  name: "positionMain",
  data() {
    return {
      formItem: {
        worker_demand_id: "",
        keyword: "",
        area_id: "",
        position_id: "",
        order: "default",
        longitude: "",
        latitude: "",
        page: 0,
        pageNum: 5
      },
      pageTotal: 0,
      pageSize: 5,
      hasMore: true,
      requestLock: false,
      jobList: [],
      areaList: {
        cities: {
          "0": {
            areas: []
          }
        }
      }
    };
  },
  components: {Empty,PositionList},
  created() {
    this.$store.dispatch("changeTabName", "positionMain");
  },
  mounted() {
    if (this.$route.query.position_id) {
      this.formItem.position_id = this.$route.query.position_id;
    }
    if (this.$route.query.keyword) {
      this.formItem.keyword = this.$route.query.keyword;
    }
    this.getJobList();
    this.getAreaList();
  },
  destroy() {
    //销毁监听事件
    this.$refs.scrollTopList.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    applyJob(job_id) {},
    async getJobList() {
      this.formItem.page = ++this.formItem.page;
      //获取职位列表
      let jobListResult = await JobList(this.formItem).catch(err => {
        Message.error("系统错误，请联系技术人员。" + err);
      });
      let { page, data } = jobListResult;
      this.jobList = data;

      //分页
      this.pageTotal = Number(page.pageTotal) * Number(page.pageNum);
      this.pageSize = Number(page.pageNum);
      this.formItem.page = Number(page.page);
    },
    changePage(e) {
      this.formItem.page = e - 1;
      this.getJobList();
    },
    async getAreaList() {
      //获取区域代理
      let areaListResult = await Area();
      console.log(areaListResult);
      this.areaList = areaListResult;
    },
    //搜索
    search() {
      this.formItem.page = 0;
      this.getJobList();
    },
    //区域搜索
    areaSelect(cityCode) {
      this.formItem.page = 0;
      this.formItem.area_id = cityCode;
      this.getJobList();
    },
    navigateJobItem(jobId) {
      this.$router.push({
        name: "positionDetail",
        query: { job_id: jobId }
      });
    },
    salaryUnit(type) {
      return getSalaryUnit(type);
    },
    jobTag(index) {
      return getJobTag(index);
    },
    educationArr(index) {
      return [
        "学历不限",
        "小学",
        "初中",
        "中专",
        "高中",
        "大学专科",
        "大学本科",
        "硕士",
        "博士",
        "博士后",
        "其它"
      ][index];
    },
    genderArr(index) {
      return ["男女不限", "男", "女"][index];
    },
    transDate(str = "") {
      str = str.split("-");
      return str[1] + "月" + str[2].split(" ")[0] + "日";
    }
  }
};
</script>

<style scoped lang="less">
@import "./../../../public/less/main.less";

.positionMain {
  width: 100%;
  .ui-autocomplete {
    width: 488px;
    background: #fafafa !important;
    position: relative;
    z-index: 10;
    border: 2px solid #91cebe;
  }

  .ui-autocomplete-category {
    font-size: 16px;
    color: #999;
    width: 50px;
    position: absolute;
    z-index: 11;
    right: 0px;
    /*top: 6px; */
    text-align: center;
    border-top: 1px dashed #e5e5e5;
    padding: 5px 0;
  }

  .ui-menu-item {
    *width: 439px;
    vertical-align: middle;
    position: relative;
    margin: 0px;
    margin-right: 50px !important;
    background: #fff;
    border-right: 1px dashed #ededed;
  }

  .ui-menu-item a {
    display: block;
    overflow: hidden;
  }
}
</style>
